<template>
  <view class="container">
    
    <Card class="filter-card">
      <view class="filter-item">
        <text class="label">关联学生</text>
        <picker 
          mode="selector" 
          :range="students" 
          @change="onStudentChange"
        >
          <view class="picker">
            {{ selectedStudent || '全部学生' }}
          </view>
        </picker>
      </view>
    </Card>
    
    <view class="dashboard-content">
      <view class="section">
        <Card class="section-header">
          <text class="section-title">学习目标</text>
          <text class="section-count">{{ learningGoals.length }}个</text>
        </Card>
        
        <view class="goals-list">
          <Card 
            v-for="(goal, index) in learningGoals" 
            :key="index" 
            class="goal-card"
            clickable
            @click="goToLearningGoalDetail(goal)"
          >
            <view class="goal-header">
              <text class="goal-title">{{ goal.title }}</text>
              <view class="goal-status" :class="goal.statusClass">
                {{ goal.status }}
              </view>
            </view>
            <view class="goal-content">
              <view class="goal-student">{{ goal.student }}</view>
              <view class="goal-time">{{ goal.timeRange }}</view>
            </view>
          </Card>
        </view>
      </view>
      
      <view class="section">
        <Card class="section-header">
          <text class="section-title">生活目标</text>
          <text class="section-count">{{ lifeGoals.length }}个</text>
        </Card>
        
        <view class="goals-list">
          <Card 
            v-for="(goal, index) in lifeGoals" 
            :key="index" 
            class="goal-card"
            clickable
            @click="goToLifeGoalDetail(goal)"
          >
            <view class="goal-header">
              <text class="goal-title">{{ goal.title }}</text>
              <view class="goal-status" :class="goal.statusClass">
                {{ goal.status }}
              </view>
            </view>
            <view class="goal-content">
              <view class="goal-student">{{ goal.student }}</view>
              <view class="goal-time">期望完成：{{ goal.targetDate }}</view>
            </view>
          </Card>
        </view>
      </view>
      
      <view class="section">
        <Card class="section-header">
          <text class="section-title">学习计划</text>
          <text class="section-count">{{ plans.length }}个</text>
        </Card>
        
        <view class="plans-list">
          <Card 
            v-for="(plan, index) in plans" 
            :key="index" 
            class="plan-card"
            clickable
            @click="goToPlanDetail(plan)"
          >
            <view class="plan-header">
              <text class="plan-title">{{ plan.title }}</text>
              <view class="plan-status" :class="plan.statusClass">
                {{ plan.status }}
              </view>
            </view>
            <view class="plan-content">
              <view class="plan-student">{{ plan.student }}</view>
              <view class="plan-subject">{{ plan.subject }}</view>
              <view class="plan-time">{{ plan.time }}</view>
            </view>
          </Card>
        </view>
      </view>
    </view>
    
    <view class="action-buttons">
      <Button class="action-btn" type="primary" text="点评分享" @click="goToReview" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      students: ['全部学生', '张小明', '李小红', '王小刚'],
      selectedStudent: '全部学生',
      learningGoals: [
        {
          id: '1',
          title: '提高数学成绩',
          student: '张小明',
          timeRange: '2025.09.01 - 2026.01.31',
          status: '进行中',
          statusClass: 'status-progress'
        },
        {
          id: '2',
          title: '英语期末考试90分以上',
          student: '李小红',
          timeRange: '2025.09.01 - 2026.01.31',
          status: '已完成',
          statusClass: 'status-completed'
        }
      ],
      lifeGoals: [
        {
          id: '1',
          title: '改正写字潦草',
          student: '张小明',
          targetDate: '2025.10.25',
          status: '进行中',
          statusClass: 'status-progress'
        }
      ],
      plans: [
        {
          id: '1',
          title: '数学每日练习',
          student: '张小明',
          subject: '数学',
          time: '每天 19:00-20:00',
          status: '已发布',
          statusClass: 'status-published'
        },
        {
          id: '2',
          title: '英语单词背诵',
          student: '李小红',
          subject: '英语',
          time: '每周一、三、五 07:00-07:30',
          status: '已发布',
          statusClass: 'status-published'
        }
      ]
    };
  },
  
  methods: {
    onStudentChange(e) {
      this.selectedStudent = this.students[e.detail.value];
    },
    
    goToLearningGoalDetail(goal) {
      uni.navigateTo({
        url: '/pages/goal/learning-detail?id=' + goal.id
      });
    },
    
    goToLifeGoalDetail(goal) {
      uni.navigateTo({
        url: '/pages/goal/life-detail?id=' + goal.id
      });
    },
    
    goToPlanDetail(plan) {
      uni.navigateTo({
        url: '/pages/plan/detail?id=' + plan.id
      });
    },
    
    goToReview() {
      uni.navigateTo({
        url: '/pages/share/review'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.filter-card {
  margin-bottom: $spacing-base;
}

.filter-item {
  margin-bottom: $spacing-base;
}

.label {
  display: block;
  font-size: $font-size-base;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.picker {
  width: 100%;
  height: 80rpx;
  padding: 0 $spacing-base;
  line-height: 80rpx;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  box-sizing: border-box;
}

.dashboard-content {
  margin-bottom: 120rpx;
}

.section {
  margin-bottom: $spacing-lg;
}

.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-sm;
}

.section-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.section-count {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.goals-list, .plans-list {
  margin-top: $spacing-sm;
}

.goal-card, .plan-card {
  margin-bottom: $spacing-sm;
}

.goal-header, .plan-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-sm;
}

.goal-title, .plan-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  flex: 1;
}

.goal-status, .plan-status {
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
}

.status-progress {
  background-color: rgba($primary-color, 0.1);
  color: $primary-color;
}

.status-completed {
  background-color: rgba($secondary-color, 0.1);
  color: $secondary-color;
}

.status-published {
  background-color: rgba($secondary-color, 0.1);
  color: $secondary-color;
}

.goal-content, .plan-content {
  font-size: $font-size-sm;
}

.goal-student, .plan-student {
  color: $text-primary;
  margin-bottom: $spacing-xs;
}

.goal-time, .plan-subject, .plan-time {
  color: $text-secondary;
}

.action-buttons {
  position: fixed;
  bottom: 40rpx;
  left: $spacing-base;
  right: $spacing-base;
}

.action-btn {
  width: inherit;
  margin-top: $spacing-xl;

}
</style>